<template>
  <!-- 用户名登录 -->
    <el-form :model="formUser" mstatus-icon :rules="rules1" ref="formUser" label-width="100px" v-show="patternName"> <!-- ref:表单验证(和提交数据相同) -->
        <el-form-item label="用户名：" prop="username">  <!-- prop的值与rules里面要验证的字段值是对应 -->
            <el-input
                    prefix-icon="el-icon-user" style="width: 70%"
                    type="text" v-model="formUser.username" autocomplete="off">
            </el-input>
        </el-form-item>
        <el-form-item label="密 码：" prop="password">
            <el-input
                    prefix-icon="el-icon-menu"
                    style="width: 70%" show-password type="password"
                    v-model="formUser.password" autocomplete="off">
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button el-button type="primary" @click="loginData()" style="margin-right: 100px">登录</el-button>
            <span class="pull-right"><small>还没有账号？</small><a href="../register/index.html">注册</a></span>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    name: 'UserName',
    data(){
        return{
            patternName: true,
            //用户信息
            formUser:{
                username:'',
                password:'',
            },
            //表单规则
            rules1:{
                username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
                    { min:2,max:80, message: '用户名不能小于2位,，大于80位', trigger: 'blur' },
                ],  //blur失去焦点
                password: [{ required: true, message: '密码不能为空', trigger: 'blur'},
                    { pattern: /^[ a-zA-Z0-9]{6,30}$/, message: '密码不能小于6位,不能大于30位,无特殊字符', trigger: 'blur'},
                ],
            },

        }
    },
    methods: {
        //用户登录
        loginData(){
            this.$refs.formUser.validate((valid) => {
                if (valid) {
                    this.$http({
                        method: "POST",
                        url: "/user/login",
                        data:{
                            username:this.formUser.username,
                            password:this.formUser.password
                        }
                    }).then((res)=>{
                        if(!res.data.flag){
                            this.$message.error(res.data.message);
                        }else{
                            this.$message.success({
                                message: res.data.message,
                                type: 'success'
                            });
                            setTimeout(function () {
                                location.href="../chat/index.html";
                            },500)

                        }
                    });
                } else {
                    this.$message.error('此提交不符合规则');
                    return false;
                }
            });

        }
    },
    //实例被挂载后调用
    mounted(){
        //绑定对应的自定义事件
        this.$bus.$on('user',(data)=>{
            this.patternName=data;
        })
    },
    //实例销毁之前调用
    beforeDestroy(){
        //解绑某事件
        this.$bus.$off('user')
    }
}
</script>

<style>

</style>